<template>
  <div class="dynedAccountDetails">
    <el-card>
      <h2 v-if="pageType == 'create'">添加DYNED账号</h2>
      <h2 v-if="pageType == 'edit'">编辑DYNED账号</h2>
      <h2 v-if="pageType == 'details'">DYNED账号详情</h2>

      <el-form ref="form" :model="formData" :rules="rules" label-width="150px">
        <div class="form_wrap" v-if="formData.product">
          <h4>基础信息</h4>
          <hr />
          <div class="form_content">
            <el-form-item label="合同编号" prop="contractNo">
              <el-input
                v-model="formData.contractNo"
                placeholder="请填写合同编号"
                style="width: 218px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="学员编号" prop="user_id">
              <el-select
                v-model="formData.user_id"
                placeholder="请选择学员编号"
                @change="changeStudent"
                disabled
              >
                <el-option
                  v-for="item in stutendList"
                  :key="item.id"
                  :label="item.sno"
                  :value="parseInt(item.id)"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="学员姓名" prop="name">
              <el-input
                v-model="formData.name"
                placeholder="请填写学员姓名"
                style="width: 218px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="账号ID" prop="email">
              <el-input
                v-model="formData.email"
                placeholder="请填写账号ID"
                style="width: 218px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="学员邮箱" prop="user_email">
              <el-input
                v-model="formData.user_email"
                placeholder="请填写学员邮箱"
                style="width: 218px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="学员手机号" prop="mobile">
              <el-input
                v-model="formData.mobile"
                placeholder="请填写学员手机号"
                maxlength="11"
                style="width: 218px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="开始日期" prop="start_date">
              <el-date-picker
                v-model="formData.start_date"
                type="date"
                placeholder="请选择开始日期"
                disabled
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期" prop="end_date">
              <el-date-picker
                v-model="formData.end_date"
                type="date"
                placeholder="请选择结束日期"
                disabled
              ></el-date-picker>
            </el-form-item>
            <el-form-item
              label="初始级别"
              prop="initial_level"
              v-if="formData.product !== 'dyned_pro'"
            >
              <el-select
                v-model="formData.initial_level"
                placeholder="请选择初始级别"
                disabled
              >
                <el-option
                  v-for="item in levelList"
                  :key="item.label.code"
                  :label="item.label.name"
                  :value="item.label.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="目标级别"
              prop="target_level"
              v-if="
                product === 'dyned'
                  ? true
                  : false || product === 'ineo'
                  ? true
                  : false
              "
            >
              <el-select
                v-model="formData.target_level"
                placeholder="请选择目标级别"
                disabled
              >
                <el-option
                  v-for="item in levelList"
                  :key="item.label.code"
                  :label="item.label.name"
                  :value="item.label.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="当前级别"
              prop="current_level"
              v-if="product === 'dyned' ? true : false"
            >
              <el-select
                v-model="formData.current_level"
                placeholder="请选择当前级别"
                disabled
              >
                <el-option
                  v-for="item in levelList"
                  :key="item.label.code"
                  :label="item.label.name"
                  :value="item.label.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="上次级别" prop="previous_level" v-if="formData.product !== 'dyned_pro'">
                            <el-select v-model="formData.previous_level" placeholder="请选择上次级别" disabled>
                                <el-option
                                    v-for="item in levelList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item> -->
            <el-form-item
              label="青少年课程管理"
              prop="classroom"
              v-if="formData.product === 'dyned_pro'"
            >
              <el-select
                v-model="formData.className"
                placeholder="请选择"
                disabled
              >
                <el-option
                  v-for="item in classList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="formData.password"
                placeholder="请填写合同编号"
                style="width: 218px;"
                disabled
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <el-form label-width="90px">
        <el-form-item>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import http from "@/api/dyned";
import contractApi from "@/api/contract";
import { formatDate, formatArray } from "@/utils";
import { changeTitleMinin, detailsMinin } from "@/mixin";
export default {
  name: "dynedAccountDetails",
  mixins: [changeTitleMinin, detailsMinin],
  data() {
    return {
      http: http,
      levelList: [],
      stutendList: [],
      rules: {},
      classList: [],
      product: null
    };
  },
  methods: {
    handleCancel() {
      this.$router.go(-1);
    },

    changeStudent(id) {
      if (this.stutendList.length) {
        for (let i = 0; i < this.stutendList.length; i++) {
          if (id == this.stutendList[i].id) {
            this.formData.name = this.stutendList[i].name;
          }
        }
      }
    },

    getStudent() {
      contractApi.getStudent().then(res => {
        this.stutendList = res.data;
      });
    },
    init() {
      let basicConfig = JSON.parse(sessionStorage.getItem("basicConfig"));
      this.levelList = formatArray(basicConfig.user_level);
      // this.getPageParams('dynedAccountDetailsParams',()=>{
      //     this.getStudent();
      //     if(this.pageParams.id){
      //         this.getContentDetail(this.pageParams.id);
      //     }
      // })
      this.getPageParams("dynedAccountOperationParams", () => {
        this.getStudent();
        if (this.pageParams.id) {
          http.getContentDetail(this.pageParams.id).then(res => {
            let formData = res.data;
            if (this.checkKeysData.length) {
              this.checkKeysData.map(item => {
                if (formData[item]) {
                  formData[item] = formData[item].split(",");
                } else {
                  formData[item] = [];
                }
              });
            }
            if (formData["headimgurl"]) {
              this.imageUrl = formData["headimgurl"];
            }
            this.formData = formData;
            for (let item of this.classList) {
              if (item.url === this.formData.classroom) {
                this.formData.className = item.name;
              }
            }
          });
        }
      });
    },
    getparams() {
      if (Object.keys(this.$route.params).length) {
        sessionStorage.setItem(
          "dynedDetailsParams1",
          JSON.stringify(this.$route.params)
        );
      }

      let pageParams = sessionStorage.getItem("dynedDetailsParams1");
      if (pageParams) {
        pageParams = JSON.parse(pageParams);
        this.product = pageParams.product;
      }
    }
  },
  created() {
    this.init();
    this.getparams()
    contractApi.getClassList().then(res => {
      this.classList = res.data;
    });
  }
};
</script>

<style lang="scss" scoped>
.dynedAccountDetails {
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    cursor: pointer;
    background: #f1f1f1;
  }

  &::-moz-scrollbar {
    display: none;
  }
  &::-ms-scrollbar {
    display: none;
  }
  &::-o-scrollbar {
    display: none;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    width: 10px;
    cursor: pointer;
    background: #bbb;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 0px;
    background: #f1f1f1;
  }
  h2 {
    margin-bottom: 10px;
  }
  .form_wrap {
    margin-bottom: 10px;
    h4 {
      margin: 10px 0px;
    }
    hr {
      margin-bottom: 10px;
    }
    .form_content {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>
